<!--
Date: 2025-08-13
Copyright (c) 2025 Industrial Software Feature Database
-->
<template>
  <el-dialog v-if="props.dialogVisible" v-model="props.dialogVisible" title="新增对比条目" width="600px" append-to-body :before-close="closeDialog">
    <el-form size="small" label-width="120">
      <el-form-item label="对比条目类型：" required>
        <!-- <el-select style="width: 480px" v-model="formData.modelNumber" clearable placeholder="请选择机型" @change="modelChange">
          <el-option v-for="item in modelNumberList" :label="item.name" :value="item.mark" :key="item.mark"></el-option>
        </el-select> -->
        <el-cascader
          style="width: 480px"
          v-model="formData.itemCode"
          :options="typeOptions"
          :props="cascaderProp"
          :show-all-levels="false" 
          @change="entryChange"
        ></el-cascader>
      </el-form-item>
      <el-form-item label="对比条目名称：" required>
        <!-- <el-select style="width: 480px" v-model="formData.itemName" filterable clearable placeholder="请选择批次号">
          <el-option v-for="(item, index) in batchList" :label="batchList[index]" :value="batchList[index]" :key="index"></el-option>
        </el-select> -->
        <el-input style="width: 480px" v-model="formData.itemName" clearable />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer" style="text-align: center;">
        <el-button size="small" @click="closeDialog">取消</el-button>
        <el-button type="primary" size="small" @click="sureChoose">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getCompareEntriesTree } from '@/api/dataAcquisition';
import { v } from 'vxe-table';
const emit = defineEmits(['handleEvent']);
const props = defineProps(['dialogVisible']);
const loading = ref(false);
const modelNumberList = ref([]);
const batchList = ref([]);
const roundList = ref([]);
const typeOptions = ref([]);
const formData = reactive({
  itemCode: '',
  itemName: '',
  id: '', 
})
const cascaderProp = {
  expandTrigger: 'hover',
  emitPath: false,
  children: 'childCompareItemVoList',
  label: 'itemCode',
  value: 'itemCode',
}
const entryChange = (val) => {
  if (val) {
    const foundNode = findTreeNodeByCode(typeOptions.value, val);
    const { itemCode, itemName, matchKey, id, type } = foundNode;
    formData.itemCode = itemCode;
    formData.itemName = itemName;
    formData.id = id;
    formData.type = type;
    formData.matchKey = matchKey;
  }
}
const findTreeNodeByCode = (tree, targetCode) => {
  for (const node of tree) {
    if (node.itemCode === targetCode) {
      return node; // 找到目标节点
    }
    if (node.childCompareItemVoList?.length) {
      const result = findTreeNodeByCode(node.childCompareItemVoList, targetCode);
      if (result) return result; // 子级中找到则返回
    }
  }
  return null; // 未找到
}
// 获取机型
const getModelList = () => {
  getMeshModelStructureList({parentId: 0, pageSize: 999}).then(res => {
    if (res) {
      modelNumberList.value = res.rows;
    }
  })
}
// 获取批次号 && 轮次号
const modelChange = (val) => {
  if (val) {
    formData.batchNumber = '';
    formData.roundNumber = '';
    getBatchNo({modelNumber: val}).then(res => {
      if (res) {    
        batchList.value = res.data.map(name => Object.fromEntries([['value', name]]))
      }
    })
    getRoundNo({modelNumber: val}).then(res => {
      if (res) {    
        roundList.value = res.data.map(name => Object.fromEntries([['value', name]]))
      }
    })
  }
}
const closeDialog = () => {
  emit('handleEvent', {type: 'cancel'});
};

const sureChoose = () => {
  if (!formData.itemCode) {
    ElMessage.error('请选择对比条目类型');
    return;
  }
  emit('handleEvent', {type: 'AddEnt', data: formData});
};

onMounted(() => {
  getCompareEntriesTree().then(res => {
    if (res) {
      typeOptions.value = res.data;
    } 
  })
});
</script>

<style lang="scss" scoped>
.model-batch {
  padding: 10px;
  span {
    margin-right: 20px;
  }
}
</style>
